<style scoped>
.left_tree,
.right_table {
  position: absolute;
  height: 100%;
  top: 0;
}
.left_tree {
  left: 0;
  width: 218px;
  border: 1px solid #f4f5f9;
  background: #ffffff;
  padding: 0 12px;
}
.right_table {
  right: 0;
  width: calc(100% - 220px);
}
</style>
<template>
  <div style="height:100%;position:relative;">
    <div class="left_tree">
      <VehicleTypeTree @node-change="carTypeChange"/>
    </div>
    <div class="right_table">
      <BaseOperateTable
        ref="refPage"
        :show-condition-slot="false"
        :query-url="queryUrl"
        :delete-url="deleteUrl"
        :overwrite-delete-request="deleteRequest"
        :header="columns"
        @operate="tableOperate">
        <template v-slot:operate>
          <a-button
            type="primary"
            :disabled="currentCarType.vehicleTypeId === undefined"
            @click="addData">添加车辆</a-button>
          <a-button
            type="primary"
            @click="importData">导入车辆</a-button>
          <a-button
            type="primary"
            danger
            @click="batchDelete">删除车辆</a-button>
        </template>
      </BaseOperateTable>
    </div>
    <BaseFormDialog
      ref="refAddDataDialog"
      :title="dialogTitle"
      :rules="addDataRules"
      :form="addDataForm"
      @confirm="addFormConfirm">
      <template v-slot:coordinate="{state}">
        <a-input-group compact>
          <a-select
            v-model:value="state.coordinateType"
            style="width:130px"
            :options="COORDINATE"
            placeholder="请选择坐标系"
          />
          <a-input
            v-model:value="state.coordinate"
            style="width: 254px;marginLeft: 10px;"
            placeholder="请输入经纬度[120.0000, 30.0000]"/>
        </a-input-group>
      </template>
    </BaseFormDialog>
    <ImportDialog
      v-if="importDialogVisible"
      v-model:visible="importDialogVisible"
      :import-url="importUrl"
      @onSuccess="onImportFileSuccess"/>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { addVehicle, editVehicle, getBrandList, getoperatingUnitList, delVehicleByID } from '@/api/vehicle/handleData'
import BaseOperateTable from '@/components/BaseOperateTable.vue'
import BaseFormDialog from '@/components/BaseFormDialog.vue'
import { BasePath } from '@/api/request'
import VehicleTypeTree from './VehicleTypeTree.vue'
import ImportDialog from './DataImport.vue'

const refPage = ref(null)
const refAddDataDialog = ref(null)
const dialogTitle = ref('添加车辆') // form表单弹窗标题
const importDialogVisible = ref(false) // 导入弹窗显隐
const currentCarType = reactive({ vehicleTypeName: undefined, vehicleTypeId: undefined }) // 当前车辆类型
/** ========== 表格模块========== */
const queryUrl = ref(`${BasePath}/vehicle/byPage`) // 分页查询接口URL
const deleteUrl = ref(`${BasePath}/vehicle/`) // 批量删除接口URL
const importUrl = ref(`${BasePath}/vehicle/importExcel`)
const columns = ref([
  {
    title: '车辆编号',
    width: 160,
    dataIndex: 'vin',
    ellipsis: true
  },
  {
    title: '车牌号码',
    width: 120,
    dataIndex: 'carLicence',
    ellipsis: true
  },
  {
    title: '车辆品牌',
    width: 120,
    dataIndex: 'brandName',
    ellipsis: true
  },
  {
    title: '运营单位',
    width: 160,
    dataIndex: 'operatingUnitName',
    ellipsis: true
  },
  {
    title: '创建时间',
    width: 160,
    dataIndex: 'createTime',
    ellipsis: true
  },
  {
    title: '更新时间',
    width: 160,
    dataIndex: 'updateTime',
    ellipsis: true
  },
  {
    title: '维护人员',
    width: 100,
    dataIndex: 'updateBy',
    ellipsis: true
  }
])

const deleteRequest = (ids) => delVehicleByID(ids)

/** 表格操作列事件 */
const tableOperate = ({ eventType, data }) => {
  if (eventType === 'edit') {
    dialogTitle.value = '编辑信号机'
    refAddDataDialog.value.setFormData(data)
    refAddDataDialog.value.show()
  }
}
/** =========操作按钮模块========== */
/** 添加车辆 */
const addData = () => {
  dialogTitle.value = '添加车辆'
  let data = {}
  addDataForm.value.forEach(({ key, value }) => {
    data[key] = value
  })
  data.vehicleTypeName = currentCarType.vehicleTypeName
  data.vehicleTypeId = currentCarType.vehicleTypeId
  refAddDataDialog.value.setFormData(data)
  refAddDataDialog.value.show()
}

/** 导入车辆 */
const importData = () => {
  importDialogVisible.value = true
}

/** 导入数据成功后 */
const onImportFileSuccess = () => {
  importDialogVisible.value = false
  refPage.value.queryByCondition({ vehicleTypeId: currentCarType.vehicleTypeId }, true)
}

/** 批量删除 */
const batchDelete = () => {
  refPage.value.deleteSelectedRows()
}

/**
 * 车辆类型改变
 * @param {number} vehicleTypeId 车辆类型Id
 */
const carTypeChange = ({ id, name }) => {
  currentCarType.vehicleTypeName = name
  currentCarType.vehicleTypeId = id
  if (id !== undefined) refPage.value.queryByCondition({ vehicleTypeId: id }, true)
}
/** =========表单模块========== */
const brandList = ref([]) // 车辆品牌列表
const operatingUnitList = ref([]) // 运营单位列表
// 表单的配置
const addDataForm = ref([
  { key: 'vehicleTypeName', value: undefined, label: '车辆类型', disabled: true },
  { key: 'vehicleTypeId', value: undefined, ignore: true },
  { key: 'vin', value: undefined, label: '车辆编号' },
  { key: 'carLicence', value: undefined, label: '车牌号码' },
  { key: 'brandName', value: undefined, label: '车辆品牌', type: 'select', options: brandList },
  { key: 'operatingUnitName', value: undefined, label: '运营单位', type: 'select', options: operatingUnitList }
])
// 表单校验规则
const addDataRules = reactive({
  vehicleTypeName: [
    { required: true, message: '请输入车辆类型', trigger: 'blur' }
  ],
  vin: [
    { required: true, message: '请输入车辆编号', trigger: 'blur' }
  ],
  carLicence: [
    { required: true, message: '请输入车牌号码', trigger: 'blur' }
  ],
  brandName: [
    { required: true, message: '请选择车辆品牌', trigger: 'blur' }
  ],
  operatingUnitName: [
    { required: true, message: '请选择运营单位', trigger: 'blur' }
  ]
})

/** 添加数据form表单数据提交 */
const addFormConfirm = (info) => {
  if (dialogTitle.value === '添加车辆') {
    // 添加数据
    addVehicle(info).then(({ resCode, resMsg }) => {
      if (resCode === '00000') {
        message.success('添加车辆成功')
        refPage.value.queryByCondition({ vehicleTypeId: currentCarType.vehicleTypeId }, true)
      } else {
        message.error(resMsg)
      }
    })
  } else {
    // 编辑数据
    editVehicle(info).then(({ resCode, resMsg }) => {
      if (resCode === '00000') {
        message.success('编辑车辆成功')
        refPage.value.queryByCondition({ vehicleTypeId: currentCarType.vehicleTypeId })
      } else {
        message.error(resMsg)
      }
    })
  }
}
/** 查询车辆品牌列表 */
const queryBrandList = () => {
  getBrandList().then(({ resCode, resMsg, data }) => {
    brandList.value = (data || []).map(({ name }) => ({ value: name, label: name }))
  })
}

/** 查询运营单位列表 */
const queryOperatingUnitList = () => {
  getoperatingUnitList().then(({ resCode, resMsg, data }) => {
    operatingUnitList.value = (data || []).map(({ name }) => ({ value: name, label: name }))
  })
}

queryBrandList()
queryOperatingUnitList()
</script>
<script>
export default {
  name: 'car'
}
</script>